import { chinaMap } from "@/utils/echarts";
import React from "react";
import { useEffect } from "react";
import { useRef } from "react";
import styles from "@/style/base/map.module.scss"
import CustCardHeader from "../../component/custCardHeader";
import { useState } from "react";
import getState from "@/api/state";
import Loading from "../../component/loading/loading";



const Mapbox = ({ condition, title = "地图分布", showBtn = true, height, style }) => {
    const [loading, setLoading] = useState(false)
    const [state, setState] = useState([
        { name: '北京市', comCode: "11000000", value: 0, children: [] },
        { name: '天津市', comCode: "12000000", value: 0, children: [] },
        { name: '河北省', comCode: "13000000", value: 0, children: [] },
        { name: '山西省', comCode: "14000000", value: 0, children: [] },
        { name: '内蒙古自治区', comCode: "15000000", value: 0, children: [] },
        { name: '辽宁省', comCode: "21000000", value: 0, children: [] },
        { name: '吉林省', comCode: "22000000", value: 0, children: [] },
        { name: '黑龙江省', comCode: "23000000", value: 0, children: [] },
        { name: '上海市', comCode: "31000000", value: 0, children: [] },
        { name: '江苏省', comCode: "32000000", value: 0, children: [] },
        { name: '浙江省', comCode: "33000000", value: 0, children: [] },
        { name: '安徽省', comCode: "34000000", value: 0, children: [] },
        { name: '福建省', comCode: "35000000", value: 0, children: [] },
        { name: '江西省', comCode: "36000000", value: 0, children: [] },
        { name: '山东省', comCode: "37000000", value: 0, children: [] },
        { name: '河南省', comCode: "41000000", value: 0, children: [] },
        { name: '湖北省', comCode: "42000000", value: 0, children: [] },
        { name: '湖南省', comCode: "43000000", value: 0, children: [] },
        { name: '广东省', comCode: "44000000", value: 0, children: [] },
        { name: '广西壮族自治区', comCode: "45000000", value: 0, children: [] },
        { name: '海南省', comCode: "46000000", value: 0, children: [] },
        { name: '重庆市', comCode: "50000000", value: 0, children: [] },
        { name: '四川省', comCode: "51000000", value: 0, children: [] },
        { name: '贵州省', comCode: "52000000", value: 0, children: [] },
        { name: '云南省', comCode: "53000000", value: 0, children: [] },
        { name: '西藏自治区', comCode: "54000000", value: 0, children: [] },
        { name: '陕西省', comCode: "61000000", value: 0, children: [] },
        { name: '甘肃省', comCode: "62000000", value: 0, children: [] },
        { name: '青海省', comCode: "63000000", value: 0, children: [] },
        { name: '宁夏回族自治区', comCode: "64000000", value: 0, children: [] },
        { name: '新疆维吾尔自治区', comCode: "65000000", value: 0, children: [] },
        { name: '台湾省', comCode: "null123", value: 0, children: [] },
        { name: '香港特别行政区', comCode: "null124", value: 0, children: [] },
        { name: '澳门特别行政区', comCode: "null125", value: 0, children: [] },
        { name: '南海诸岛', comCode: "null126", value: 0, children: [] }
    ])

    // 如果权限机构是全国，则返回全国的数据回来
    /**
     * [
     *  {
     *      name:"湖南省",
     *      comCode:"43000000",
     *      value:23494,
     *  },
     *  {
     *      name:"广东省",
     *      comCode:"43000000",
     *      value:23494,
     *  } 
     * ]
     */

    // 前端根据这个数据替换上面的state列表，这样地图可以显示热力图



    // 如果权限机构是省份（后端判断是省份还是全国），则返回这个省份下面的城市列表
    /**
    * [
     *  {
     *      name:"长沙",
     *      comCode:"43000000",
     *      value:23494,
     *  },
     *  {
     *      name:"湘潭",
     *      comCode:"43000000",
     *      value:23494,
     *  } 
     * ]
     */
    // 获取右侧要显示的列表
    const getDefaultCity = ({ state, setState, comCode }) => {
        const params = {
            ...condition, cType: "baseArea",
            comCode
        }
        // console.log("执行了吗？")
        getState({
            apiUrl: "/cifgp-core-api/baseQuery/pieChart",
            state,
            setState,
            condition: { ...params },
            setLoading
        })
    }


    // [
    //     [
    //         { name: "全司", comCode: "00000000", value: 7 },
    //         { name: "广东", comCode: "44000000", value: 7 }
    //     ]
    // ]



    useEffect(() => {
        console.log("地图的useEffect执行？")
        getDefaultCity({
            state: defalutCity,
            setState: setDefaultCity,
            comCode: condition.comCode
        })

    }, [condition])
    const [defalutCity, setDefaultCity] = useState([

    ])//设置默认展示的城市列表

    // 处理数据给state 只有筛选全国的时候才替换
    const insState = (list = []) => {
        var newState = [...state];
        state.forEach((item, index) => {
            console.log("state中预设的数据：", item, index)
            list.forEach(city => {
                console.log("传过来的cidy", city)
                if (item.comCode === city.comCode) {

                    var object = {
                        ...item,
                        value: Number(city.value)
                    }
                    console.log("state和传进来的数据对上了", object);

                    newState.splice(index, 1, object)
                    // 把state中找到item这项替换掉
                    // console.log("新的全国数据：\n", newState)
                    // newState[index]

                }
            })
        })

        setState([...newState])
    }
    // 如果是监听列表
    useEffect(() => {
        // 如果是全国 ，要渲染热力图用

        if (condition.comCode === "00000000") {
            console.log("是全国")
            insState(defalutCity)
        }
    }, [defalutCity])
    // 地图点击事件
    const handleClickMap = ({ comCode }) => {
        // 
        getDefaultCity({
            state: defalutCity,
            setState: setDefaultCity,
            comCode: comCode
        })


    }



    const dom = useRef(null)

    useEffect(() => {
        chinaMap({
            event: dom.current,
            state: state
        }, handleClickMap)
    }, [state])
    return (


        <>
            <div className={styles.card} style={{ ...style }}>
                <Loading loading={loading}>
                    <div className={styles.card_center}>
                        <CustCardHeader titleCenter title="客户区域分布" />
                        <div className={styles.map} >
                            <div className={styles.mapContainer} ref={dom}>
                                map
                            </div>
                            <div className={styles.list}>
                                <div className={styles.list_container}>
                                    <div className={styles.cityHeader}>
                                        <span style={{ width: "30%" }}>序号</span>
                                        <span style={{ width: "50%" }}>城市</span>
                                        <span style={{ width: "20%" }}>数量</span>
                                    </div>
                                    <ul className={styles.defalutCity}>
                                        {
                                            defalutCity.map((item, index) => {
                                                return (
                                                    <li className={styles.li} key={index}>
                                                        <span style={{ width: "30%" }}>{index + 1}</span>
                                                        <span style={{ width: "50%" }}>{item.name}</span>
                                                        <span style={{ width: "20%" }}>{item.value}</span>
                                                    </li>
                                                )
                                            })
                                        }
                                    </ul>
                                </div>
                            </div>
                        </div>

                    </div>
                </Loading>



            </div>

        </>
    )
}
export default Mapbox;